<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <title>登录-注册</title>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script>
        $(document).ready(function() {

            $(".form").slideDown(500);

            $("#landing").addClass("border-btn");

            $("#registered").click(function() {
                $("#landing").removeClass("border-btn");
                $("#landing-content").hide(500);
                $(this).addClass("border-btn");
                $("#registered-content").show(500);

            })

            $("#landing").click(function() {
                $("#registered").removeClass("border-btn");
                $(this).addClass("border-btn");

                $("#landing-content").show(500);
                $("#registered-content").hide(500);
            })
        });
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }

        body {
            background: #F7F7F7;
        }

        .form {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -185px;
            margin-top: -210px;
            height: auto;
            width: 340px;
            font-size: 18px;
            -webkit-box-shadow: 0px 0px 10px #A6A6A6;
            background: #fff;
        }

        .border-btn {
            border-bottom: 1px solid #ccc;
        }

        #landing,
        #registered {
            float: left;
            text-align: center;
            width: 170px;
            padding: 15px 0;
            color: #545454;
        }
        .test{
            float: left;
            text-align: center;
            width: 170px;
            padding: 15px 0;
            color: #545454;
        }
        #landing-content {
            clear: both;
        }

        .inp {
            height: 30px;
            margin: 0 auto;
            margin-bottom: 30px;
            width: 200px;
        }

        .inp>input {
            text-align: center;
            height: 30px;
            width: 200px;
            margin: 0 auto;
            transition: all 0.3s ease-in-out;
        }

        .login {
            border: 1px solid #A6A6A6;
            color: #a6a6a6;
            height: 30px;
            width: 202px;
            text-align: center;
            font-size: 13.333333px;
            margin-left: 70px;
            line-height: 30px;
            margin-top: 30px;
            margin-bottom: 30px;
            transition: all 0.3s ease-in-out;
        }

        .login:hover {
            background: #A6A6A6;
            color: #fff;
        }

        #bottom {
            margin-top: 30px;
            font-size: 13.333333px;
            color: #a6a6a6;
        }

        #registeredtxt {
            float: left;
            margin-left: 80px;
        }

        #forgotpassword {
            float: right;
            margin-right: 80px;
        }

        #photo {
            border-radius: 80px;
            border: 1px solid #ccc;
            height: 80px;
            width: 80px;
            margin: 0 auto;
            overflow: hidden;
            clear: both;
            margin-top: 30px;
            margin-bottom: 30px;
        }

        #photo>img:hover {
            -webkit-transform: rotateZ(360deg);
            -moz-transform: rotateZ(360deg);
            -o-transform: rotateZ(360deg);
            -ms-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
        }

        #photo>img {
            height: 80px;
            width: 80px;
            -webkit-background-size: 220px 220px;
            border-radius: 60px;
            -webkit-transition: -webkit-transform 1s linear;
            -moz-transition: -moz-transform 1s linear;
            -o-transition: -o-transform 1s linear;
            -ms-transition: -ms-transform 1s linear;
        }


        #registered-content {
            margin-top: 40px;
            display: none;

        }

        .fix {
            clear: both;
        }
        .form{
            display: none;
        }
    </style>

</head>

<body>

<div class="form">
    <center><h3>二手车信息</h3></center>
    <div id="landing">登陆</div>
    <div id="registered">注册</div>
    <div class="fix"></div>
    <div id="landing-content">
        <div id="photo"><img th:src="@{/images/photo.jpg}" /></div>
        <div class="inp"><input type="text" placeholder="用户名" /></div>
        <div class="inp"><input type="password" placeholder="密码" /></div>
        <div class="login">登录</div>
        <div id="bottom"><span id="registeredtxt">立即注册</span><span id="forgotpassword">忘记密码</span></div>
    </div>

    <form th:action="@{/user/reg}" method="post">
    <div id="registered-content" style="height: auto">
        <div class="inp"><input type="text" name="uname" placeholder="请输入用户名" required/></div>
        <div class="inp"><input type="password" name="pwd" placeholder="请输入密码" required /></div>
        <div class="inp"><input type="password" placeholder="请再次输入密码" required/></div>
        <div class="inp"><input type="email"  name="email" placeholder="电子邮箱"required /></div>
        <div class="inp"><input type="text"  name="phone" placeholder="手机号码" required/></div>
<!--        <div class="test">发送短信</div>-->

        <button class="login" type="submit">立即注册</button>
    </div>
    </form>
</div>

<!--<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">-->
<!--    <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>-->
<!--    <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>-->
<!--</div>-->

</body>
</html>
